<template>
    <div class="right_content" style="margin-top: 11px">
        <div id="div1">
            <span id="span1"><h4><b>热门推荐电影</b></h4></span>
        </div>
        <div id="div2" v-for="movie in top5">
            <router-link :to="'detail/'+movie.id">
                <span><h5><b>{{movie.name}}</b></h5></span>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BannerRight",
        data() {
            return {
                top5: []
            }
        },
        created() {
            this.$axios.get(`${this.$settings.base_url}/yingshi/top5/`).then(response => {
                this.top5 = response.data
                console.log(this.top5)
            }).catch(() => {
                this.$message({
                    message: "获取电影分类信息有误",
                })
            })
        }
    }
</script>

<style scoped>
    .el-table td, .el-table th {
        padding: 14px 0;
        min-width: 0;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
    }
    #div1 {
        margin-top: 0;
    }
    #span1 {
        position: absolute;
        right: 250px;
        color: red;
    }

    #div2 {
        position: relative;
        top: 50px;
        right: 50px;
    }

</style>